<template>
    <div class="detail-wrapper">
        <div class="title-wrapper">
            <el-page-header @back="goBack"
                            content="文章详情">
            </el-page-header>
        </div>
        <div class="content-wrapper">
            <h1 class="title">{{title}}</h1>
            <p class="view-count">
                浏览量：{{viewCount}}
            </p>
            <div class="content"
                 v-html="mainText">
            </div>
            <div class="btn-wrapper">
                <el-popover placement="top"
                            width="160"
                            v-model="visible">
                    <p>确定通过审核?</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini"
                                   type="text"
                                   @click="visible = false">取消</el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click="handleExamine(true)">确定</el-button>
                    </div>
                    <el-button type="warning"
                               icon="el-icon-check"
                               trigger="click"
                               slot="reference"
                               v-hasPermi="['operater:news:examine']">通过审核</el-button>
                </el-popover>
                <el-popover placement="top"
                            width="300"
                            v-model="unCheckVisible">
                    <el-form ref="form"
                             :model="sizeForm"
                             label-width="80px"
                             size="mini">
                        <el-form-item label="审核意见">
                            <el-input v-model="sizeForm.remarks"
                                      required></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini"
                                   type="text"
                                   @click="unCheckVisible = false">取消</el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click="handleExamine(false)">确定</el-button>
                    </div>
                    <el-button type="danger"
                               icon="el-icon-close"
                               trigger="click"
                               slot="reference"
                               v-hasPermi="['operater:news:examine']">不通过审核</el-button>
                </el-popover>
            </div>
        </div>
    </div>
</template>
<script>
import { getNews, updateState } from '@/api/operater/news'

export default {
    name: 'articleDetail',
    data() {
        return {
            sizeForm: {
                remarks: '',
            },
            title: '',
            mainText: '',
            id: 0,
            unCheckVisible: false,
            visible: false,
            remarks: '555',
            viewCount: '',
        }
    },
    created() {
        this._getNews(this.$route.query.newsId)
    },
    methods: {
        _getNews(id) {
            getNews(id)
                .then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        this.title = res.data.title
                        this.mainText = res.data.mainText
                        this.viewCount = res.data.viewCount
                        this.id = res.data.id
                        // this.imageUrl = baseUrl(res.data.thumbnailId)
                        // this.formData = { ...res.data }
                    }
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        goBack() {
            // console.log('go back');
            this.$router.go(-1)
        },
        /** 通过按钮操作 */
        handleExamine(examine) {
            const id = this.id
            let params = {
                id,
                newsRemarks: this.sizeForm.remarks,
                yesOrNo: examine,
            }
            updateState(params)
                .then((res) => {
                    // console.log(res);
                    this.$message(res.msg)
                    if (res.code === 200) {
                        this.$message.success(res.msg)
                        this.visible = false
                        this.unCheckVisible = false
                        this.$router.go(-1)
                    } else {
                        this.$message.success(res.msg)
                        this.unCheckVisible = false
                        this.visible = false
                        this.$router.go(-1)
                    }
                })
                .catch((e) => {
                    console.log(e)
                })
        },
    },
}
</script>
<style lang="scss">
.detail-wrapper {
    padding-bottom: 60px;
    .title-wrapper {
        padding: 24px;
    }
    .content-wrapper {
        width: 80%;
        margin: 0 auto;
        .el-button--medium {
            margin-right: 35px;
        }
        img {
            max-width: 100%;
        }
        .btn-wrapper,
        .title {
            text-align: center;
            margin-top: 30px;
        }
    }
}
</style>
